<template>
	<view class="userinfo">
		<view class="item">
			<roc-item :title="'头像'" :rightIcon="!flag ? 'right' : ''">
				<view slot="right">
					<image :src="userInfo.avatar" mode="aspectFill" class="avatar" @click="chooseImage"></image>
				</view>
			</roc-item>
		</view>
		<!-- <view class="item">
			<roc-item :title="'登录账号'" :borderBottomColor="'transparent'" :rightIcon="'write'">
				<view slot="right">
					<input type="text" v-model="userInfo.account" class="input">
				</view>
			</roc-item>
		</view> -->
		<roc-line :height="1"></roc-line>
		<view class="item">
			<roc-item :title="'昵称'" :borderBottomColor="'transparent'" :rightIcon="!flag ? 'write' : ''">
				<view slot="right">
					<input type="text" v-model="userInfo.nickname" class="input" :disabled="flag">
				</view>
			</roc-item>
		</view>
		<roc-line :height="6"></roc-line>

		<view class="item" @click="tochangephone">
			<roc-item :title="'手机号'" :borderBottomColor="'transparent'" :rightIcon="!flag ? 'write' : ''">
				<view slot="right">
					<input type="text" v-model="userInfo.mobile" class="input" disabled>
				</view>
			</roc-item>
		</view>

		<view class="margin flex flex-direction padding">
			<button class="cu-btn bg-red lg" @click="flag = false" v-if="flag">编辑</button>
			<button class="cu-btn bg-red lg" @click="save" v-else>保存</button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				loading: true,
				
				flag:true,
			}
		},
		onLoad() {
			this.getUserInfo()
		},
		methods: {
			tochangephone(){
				if(this.flag){return}
				this.$util.toUrl('/otherpages/change/change')
			},
			save() {
				if(this.userInfo.nickname.length > 10){
					return this.$util.msg('用户名不可超过10个字符')
				}
				if(this.userInfo.nickname.length < 2){
					return this.$util.msg('用户名不可少于2个字符')
				}
				let that = this
				this.request.httpTokenRequest({
					url: "user/edit",
					method: "post",

				}, this.userInfo).then(res => {
					if (res.code == 0) {
						this.$util.msg(res.msg)
						this.flag = true
						that.getUserInfo()
					} else {
						this.$util.msg(res.msg)
						return
					}
				}, error => {})
			},
			getUserInfo() {
				let that = this
				this.request.httpTokenRequest({
					url: "user/center",
					method: "get"
				}, {}).then(res => {
					if (res.code == 0) {
						that.userInfo = res.data
					} else {
						this.$util.msg(res.msg)
						return
					}
				}, error => {})
			},

			chooseImage() {
				if(this.flag){return}
				var that = this
				this.$util.chooseImage({
					count: 1,
				}, res => {
					that.$util.upload('picture', res.tempFilePaths[0], function(result) {
						if (result.code == 0) {
							that.userInfo.avatar = result.data.url
						}
					})
					uni.hideLoading()
				})
			},
		}
	}
</script>

<style lang="scss">
	.userinfo {
		background: $roc-color-f5;

		.item {
			padding: 0 $roc-primary-padding-lr;
			background: $roc-color-white;

			.avatar {
				width: 30px;
				height: 30px;
				-webkit-border-radius: 50%;
				-moz-border-radius: 50%;
				border-radius: 50%;
				border: 1px solid #efefef;
			}

			picker {
				color: $roc-color-999;
			}

			.input {
				border: 0;
				color: $roc-color-999;
				text-align: right;
				margin-right: 5px;
			}
		}

	}

	.logo_item {
		border-bottom: 1px $roc-color-f5 solid;

		.item_head {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 0;
		}

		.notice {
			padding-bottom: 10rpx;
			text-align: right;
			font-size: 22rpx;
			color: #999;
		}
	}
</style>